<template>
  <div>
    <div v-if="previewStatus">
      {{ formRow.row[field.id].join("/") }}
    </div>
    <el-cascader
      v-else
      ref="fieldEditor"
      v-model="formRow.row[field.id]"
      :options="fieldOptions ? fieldOptions : field.options.optionItems"
      class="full-width-input"
      :disabled="field.options.disabled"
      :size="field.options.size"
      :clearable="field.options.clearable"
      :filterable="field.options.filterable"
      :show-all-levels="showFullPath"
      :props="{
        checkStrictly: field.options.checkStrictly,
        multiple: field.options.multiple,
        expandTrigger: 'hover',
      }"
      :placeholder="
        field.options.placeholder || i18nt('render.hint.selectPlaceholder')
      "
      @visible-change="hideDropDownOnClick"
      @expand-change="hideDropDownOnClick"
    />
  </div>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import tableMixin from "./tableMixin";
import i18n from "Yan/utils/i18n";

export default {
  name: "table_cascader_unit",
  componentName: "FieldWidget", // 必须固定为FieldWidget，用于接收父级组件的broadcast事件
  mixins: [tableMixin, i18n],
  props: {
    designer: Object,
    field: Object,
    formRow: Object,
    fieldOptions: Array,
    designState: {
      type: Boolean,
      default: false,
    },
  },
  // inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
  data() {
    return {
      oldFieldValue: null, // field组件change之前的值
      // fieldModel: null,
      customOptionItems: [],
      rules: [],
    };
  },
  computed: {
    showFullPath() {
      return (
        this.field.options.showAllLevels === undefined ||
        !!this.field.options.showAllLevels
      );
    },
  },
  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
         需要在父组件created中初始化！！ */
    // this.initOptionItems();
    // this.initFieldModel();
    // this.registerToRefList();
    // this.buildFieldRules();

    this.handleOnCreated();
    // this.handleOptionItemsAsync();
  },

  mounted() {
    this.initEventHandler();
    // this.handleOnMounted();
  },

  methods: {
    /* 开启任意级节点可选后，点击radio隐藏下拉框 */
    hideDropDownOnClick() {
      setTimeout(() => {
        document
          .querySelectorAll(".el-cascader-panel .el-radio")
          .forEach((el) => {
            el.onclick = () => {
              this.$refs.fieldEditor.dropDownVisible = false; // 单选框部分点击隐藏下拉框
            };
          });
      }, 100);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//

.full-width-input {
  width: 100% !important;
}
</style>
